<template>
  <!-- 学生提交页面信息 -->
  <div>
    <h1 style="font-size: 30px;text-align: center;">个人信息填写</h1>
    <!-- 卡片1  -->
    <div class="stylecard">
        <el-card class="box-card1">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学号" prop="studentId" :rules="rules.reason3">
          <el-input v-model="form.studentId" placeholder="请输入学号"  @blur="changeGet" :maxlength="11" />
        </el-form-item>
        <el-form-item label="姓名" prop="name" :rules="rules.reason4">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex" :rules="rules.reason5">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="民族" prop="nation" :rules="rules.reason7">
          <el-input v-model="form.nation" placeholder="请输入民族" />
        </el-form-item>
        <el-form-item label="籍贯" prop="jg" :rules="rules.reason8">
          <el-cascader :options="areaOptions" v-model="form.nativePlace" clearable filterable :disabled="isDisabled"
                @change="addressChange" style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item label="市/县" prop="county" :rules="rules.reason16">
          <el-input v-model="form.county" placeholder="所在市/县" />
        </el-form-item>
        <el-form-item label="照片" prop="photo">
          <image-upload v-model="form.photo" />
        </el-form-item>
        <el-form-item label="班级" prop="className" :rules="rules.reason9">
          <el-input v-model="form.className" placeholder="请输入班级" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday" :rules="rules.reason10">
          <el-date-picker
            clearable
            v-model="form.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片2 -->
    <el-card class="box-card2">
      <el-form ref="form" :model="form" :rules="rules">
        <!-- <el-form-item label="班级" prop="className">
          <el-input v-model="form.className" placeholder="请输入班级" />
        </el-form-item> -->

        <el-form-item label="专业" prop="major" :rules="rules.reason11">
          <el-input v-model="form.major" placeholder="请输入专业信息" />
        </el-form-item>

        <el-form-item label="入学时间" prop="Intake" :rules="rules.reason12">
          <el-date-picker
            clearable
            v-model="form.Intake"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入学时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="家庭地址"
          prop="homeaddress"
          :rules="rules.reason13"
        >
          <el-input v-model="form.homeaddress" placeholder="请输入家庭地址" />
        </el-form-item>

        <el-form-item label="学院" prop="college" :rules="rules.reason6">
          <el-input v-model="form.college" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="年级" prop="grade" :rules="rules.reason15">
          <el-input v-model="form.grade" placeholder="请输入年级" />
        </el-form-item>
        <el-form-item
          label="申请时间"
          prop="stuCreated"
          :rules="rules.reason14"
        >
          <el-date-picker
            clearable
            v-model="form.stuCreated"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择申请时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="身份证" prop="identityCard" :rules="rules.reason1">
          <el-input v-model="form.identityCard" placeholder="请输入身份证" :maxlength="18" />
        </el-form-item>

        <el-form-item label="申请原因" prop="because" :rules="rules.reason2">
          <el-input
            v-model="form.because"
            type="textarea"
            placeholder="请输入申请原因"
          />
        </el-form-item>
        <!-- <el-form-item label="状态" prop="grade">
        <el-input v-model="form.status" />
      </el-form-item> -->
      </el-form>
    </el-card>

    </div>
    

    <!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学号" prop="studentId" :rules="rules.reason3">
        <el-input v-model="form.studentId" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="姓名" prop="name" :rules="rules.reason4">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别" prop="name" :rules="rules.reason5">
        <el-radio-group v-model="form.sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="民族" prop="nation">
        <el-input v-model="form.nation" placeholder="请输入民族" />
      </el-form-item>
      <el-form-item label="籍贯" prop="jg">
        <el-input v-model="form.jg" placeholder="请输入籍贯" />
      </el-form-item>
      <el-form-item label="照片" prop="photo">
        <image-upload v-model="form.photo" />
      </el-form-item>
      
      <el-form-item label="班级" prop="className">
        <el-input v-model="form.className" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          clearable
          v-model="form.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择出生日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入学时间" prop="Intake">
        <el-date-picker
          clearable
          v-model="form.Intake"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择入学时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="家庭地址" prop="homeaddress">
        <el-input v-model="form.homeaddress" placeholder="请输入家庭地址" />
      </el-form-item>

      <el-form-item label="学院" prop="college" :rules="rules.reason6">
        <el-input v-model="form.college" placeholder="请输入学院" />
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-input v-model="form.grade" placeholder="请输入年级" />
      </el-form-item>
      <el-form-item label="申请时间" prop="stuCreated">
        <el-date-picker
          clearable
          v-model="form.stuCreated"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择申请时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="身份证" prop="identityCard" :rules="rules.reason1">
        <el-input v-model="form.identityCard" placeholder="请输入身份证" />
      </el-form-item>

      <el-form-item label="申请原因" prop="because" :rules="rules.reason2">
        <el-input
          v-model="form.because"
          type="textarea"
          placeholder="请输入申请原因"
        />
      </el-form-item>
     
    </el-form> -->
    <!-- <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
    
            <el-tag v-if="scope.row.status == 0">待审批</el-tag>
            <el-tag v-else-if="scope.row.status == 1">已通过</el-tag>
            <el-tag v-else-if="scope.row.status == 2">已驳回</el-tag>
          </template>
        </el-table-column> -->

    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >审核状态:
        <el-tag v-if="form.status == 0 && form.xgstatus == 0"
          >你的补办申请待审批</el-tag
        >
        <el-tag
          type="success"
          v-else-if="form.status == 1 && form.xgstatus == 1"
          >你的补办申请已通过</el-tag
        >
        <el-tag type="danger" v-else-if="form.status == 2 && form.xgstatus == 2"
          >你的补办申请已驳回</el-tag
        >
        <el-tag type="danger" v-else-if="form.status == 1 && form.xgstatus == 0"
          >辅导员审核通过，学工处待审核</el-tag
        >
        <el-tag type="danger" v-else-if="form.status == 2 && form.xgstatus == 0"
          >辅导员审核已驳回你的申请</el-tag
        >
        <el-tag type="danger" v-else-if="form.status == 1 && form.xgstatus == 2"
          >辅导员审核通过，学工处将请求驳回</el-tag
        >
      </span>

      <!-- 补办申请成功 -->
      <el-button
        v-if="form.status == 1 && form.xgstatus == 1"
        type="success"
        @click="jump"
        >生成模板下载</el-button
      >
      <!-- 补办申请失败 -->
      <el-button
        v-if="form.status == 2 || form.xgstatus == 2"
        type="primary"
        @click="showbacause = true"
        >查看审批不通过原因</el-button
      >

      <!-- 申请不通过原因 -->
      <el-dialog
        :title="title"
        :visible.sync="showbacause"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="辅导员意见" prop="fdyopinion">
            <el-input
              v-model="form.fdyopinion"
              type="textarea"
              placeholder="请输入辅导员意见"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="学工意见" prop="xgopinion">
            <el-input
              v-model="form.xgopinion"
              placeholder="请输入学工意见"
              type="textarea"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = true"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 启用模板 -->
    <el-dialog
      title="证明模板编写"
      :visible.sync="dialogModel"
      width="50%"
      :before-close="handleClose"
    >
      <!-- 内容 -->

      <div style="text-align: center; font-size: 30px">证明</div>
      <div style="text-align: right">( 编号： ）</div>
      <div style="text-indent: 2em; font-size: 20px; white-space: nowrap">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="兹有我校学生" prop="name" :rules="rules.reason4">
          <el-input v-model="form.name" placeholder="请输入姓名" style="margin-left:100px;width:200px;"/>
        </el-form-item>

         <el-form-item label="性别" prop="name" :rules="rules.reason5">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="民族" prop="nation" :rules="rules.reason7">
          <el-input v-model="form.nation" placeholder="请输入民族" style="margin-left:100px;width:200px;" />
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday" :rules="rules.reason10">
          <el-date-picker
            clearable
            v-model="form.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
            style="margin-left:100px;"
          >
          </el-date-picker>
        </el-form-item>

         <el-form-item label="身份证" prop="identityCard" :rules="rules.reason1">
          <el-input v-model="form.identityCard" placeholder="请输入身份证" style="margin-left:100px;width:200px;" />
        </el-form-item>

        <el-form-item label="籍贯" prop="jg" :rules="rules.reason8">
          <!-- <el-input v-model="form.jg" placeholder="例：广西南宁" style="margin-left:100px;width:200px;" /> -->
          <el-cascader :options="areaOptions" v-model="form.nativePlace" clearable filterable :disabled="isDisabled"
                @change="addressChange" style="margin-left:100px;width:200px;"></el-cascader>
        </el-form-item>

        <el-form-item label="市/县" prop="county" :rules="rules.reason16">
          <el-input v-model="form.county" placeholder="所在市/县" style="margin-left:100px;width:200px;" />
        </el-form-item>

        <el-form-item
          label="家庭地址"
          prop="homeaddress"
          :rules="rules.reason13"
        >
          <el-input v-model="form.homeaddress" placeholder="请输入家庭地址" style="margin-left:100px;width:200px;"/>
        </el-form-item>

        <el-form-item label="入学时间" prop="Intake" :rules="rules.reason12">
          <el-date-picker
            clearable
            v-model="form.Intake"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入学时间"
            style="margin-left:100px;width:200px;"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="学院" prop="college" :rules="rules.reason6">
          <el-input v-model="form.college" placeholder="请输入学院" style="margin-left:100px;width:200px;"/>
        </el-form-item>

        <el-form-item label="专业" prop="major" :rules="rules.reason11">
          <el-input v-model="form.major" placeholder="请输入专业信息" style="margin-left:100px;width:200px;" />
        </el-form-item>



          <!-- <div style="display:flex">
                <div>
                  <el-form-item  prop="nation" :rules="rules.reason7">
                      ,<el-input v-model="form.nation" placeholder="请输入民族" style="width:150px;" />
                    </el-form-item>
                </div>
                <div>
                   族，于
                  <el-form-item label="出生日期" prop="birthday" :rules="rules.reason10">
                      <el-date-picker
                        clearable
                        v-model="form.birthday"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出生日期"
                      >
                      </el-date-picker>
                    </el-form-item>

                </div>
               

                  </div> -->
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogModel = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">申请提交</el-button>
      </span>
    </el-dialog>
    <!--  -->

    <div class="stylecard" style="margin-top:50px;">
      <el-button type="primary" @click="submitForm">申请提交</el-button>
      <el-button type="primary" @click="dialogVisible = true"
        >查看审批状态</el-button
      >

      <!-- 模板按钮 -->
      <el-button type="primary" @click="dialogModel = true">使用模板</el-button>
    </div>

  </div>
</template>


<script>
import {
  listSchool,
  getSchool,
  delSchool,
  addSchool,
  updateSchool,
} from "@/api/routine/school";
// import html2Canvas from "html2canvas";
// import JsPDF from "jspdf";
import print from "print-js";
import {
  pcaTextArr, // 省市区联动数据，纯汉字
} from 'element-china-area-data'

import {getStudentInfoByStuId } from "@/api/routine/stuIdReissue";

export default {
  name: "School",
  data() {
    return {
      // 省市区
      areaOptions: pcaTextArr,
      dialogModel: false,
      showbacause: false,
      // 显示表格
      showContent: false,
      dialogVisible: false,
      active: 0,
      cheack: "查看",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生申请表格数据
      schoolList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sex: null,
        identityCard: null,
        studentId: null,
        name: null,
        college: null,
        grade: null,
        stuCreated: null,
        because: null,
        status: null,
        jg: null,
        photo: null,
        birthday: null,
        Intake: null,
        nation: null,
        homeaddress: null,
        fdyopinion: null,
        xgopinion: null,
        xgstatus: null,
        className: null,
        areas: null,
        major: null,
        county: null,
        fdtime: null,
        xgtime: null,
      },
      // 表单参数
      form: {
        status: 0,
        xgstatus: 0,
      },
      // 表单校验
      rules: {
        reason1: [
          { required: true, message: "身份证不能为空", trigger: "blur" },
        ],
        reason2: [
          { required: true, message: "补办原因不能为空", trigger: "blur" },
        ],
        reason3: [{ required: true, message: "学号不能为空", trigger: "blur" },
          {
            max: 11,
            message: '学号最多为11位',
            trigger: 'blur',
          },
        ],
        reason4: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        reason5: [{ required: true, message: "请输入性别", trigger: "blur" }],
        reason6: [{ required: true, message: "请输入学院", trigger: "blur" }],
        reason7: [{ required: true, message: "请输入民族", trigger: "blur" }],
        reason8: [{ required: true, message: "请输入籍贯", trigger: "blur" }],
        reason9: [{ required: true, message: "请输入班级", trigger: "blur" }],
        reason10: [
          { required: true, message: "请选择出生日期", trigger: "blur" },
        ],
        reason11: [
          { required: true, message: "专业信息填写", trigger: "blur" },
        ],
        reason12: [
          { required: true, message: "选择入学时间", trigger: "blur" },
        ],
        reason13: [
          { required: true, message: "请填写家庭地址", trigger: "blur" },
        ],
        reason14: [
          { required: true, message: "选择申请时间", trigger: "blur" },
        ],
        reason15: [{ required: true, message: "输入年级", trigger: "blur" }],
        reason16: [{ required: true, message: "所再市/县", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
    this.showData();
  },
  methods: {
      // 填写学号时自动获取其他信息
      changeGet() {
      this.form.stuId = this.form.studentId ? this.form.studentId : this.$route.query.studentId
      getStudentInfoByStuId(this.form.stuId).then(response => {
        if (response.data == null) {
          this.$message.error('学号不存在')

          return
        }
        this.form = response.data
        this.form.studentId = response.data.stuNo
        this.form.name = response.data.studentName
        this.form.college = response.data.departmentName
        this.form.sex = response.data.gender
        this.form.grade =  response.data.gradeName

      });
    },

     // 地区回显到el-cascader
    parseSelectedPath(pathString) {
      const pathArray = pathString.split('/');
      // 假设 options 已经被正确设置，并且可以通过遍历找到对应的值
      let currentLevel = this.areaOptions;
      const selectedOptions = [];
      for (let i = 0; i < pathArray.length; i++) {
        const found = currentLevel.find(item => item.label === pathArray[i]);
        if (found) {
          selectedOptions.push(found.value);
          currentLevel = found.children || [];
        } else {
          // 处理未找到的情况，例如返回空数组或显示错误
          break;
        }
      }
      return selectedOptions;
    },
    // el-cascader选择处理
    addressChange(arr) {
      this.form.jg = arr[0] + '/' + arr[1] + '/' + arr[2]
    },
    // 跳转到打印页面
    jump() {
      this.active = 1;
      this.$emit("props", {
        base: false,
        active: 1,
      });
    },
    // 打印方法实现
    doPrint() {
      printJS({
        printable: "print",
        type: "html",
        targetStyles: ["*"],
        style: "@page {margin:2.4cm 2cm ;resolution: 300dpi;}",
        onPrintDialogClose: (this.erexcel = false),
        targetStyles: ["*"],
        font_size: "",
      });
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 回显数据
    showData() {
      if (this.$route.query.id != undefined) {
        getSchool(this.$route.query.id).then((response) => {
          this.form = response.data;
          this.form.nativePlace = this.parseSelectedPath(this.form.jg)
          // this.active = response.data.status + 1;
        });
      }
    },
    print() {
      this.Print;
    },
    // getPdf(title) {
    //   return new Promise((resolve) => {
    //     html2Canvas(document.querySelector("#resultsHuiZongTableId"), {
    //       allowTaint: false,
    //       useCORS: true, // allowTaint、useCORS只能够出现一个
    //       imageTimeout: 0,
    //       dpi: 300, // 像素
    //       scale: 4, // 图片大小
    //     })
    //       .then(function (canvas) {
    //         // document.body.appendChild(canvas)
    //         // 用于将canvas对象转换为base64位编码
    //         let pageData = canvas.toDataURL("image/jpeg", 1.0),
    //           canvasWidth = canvas.width,
    //           canvasHeight = canvas.height,
    //           concentWidth = 500,
    //           concentHeight = Math.round(
    //             (concentWidth / canvasWidth) * canvasHeight
    //           ),
    //           position = 72,
    //           pageHeight = 892,
    //           height = concentHeight;
    //         console.log(height, pageHeight);
    //         // 新建一个new JsPDF，A3的像素大小 842*1191，A4的像素大小 592*841。这个px像素不准确，不清楚他们的像素大小来源如何
    //         let PDF = new JsPDF("p", "px", "a3");
    //         if (height <= pageHeight) {
    //           // 添加图片
    //           PDF.addImage(
    //             pageData,
    //             "JPEG",
    //             68,
    //             position,
    //             concentWidth,
    //             concentHeight
    //           );
    //         } else {
    //           while (height > 0) {
    //             PDF.addImage(
    //               pageData,
    //               "JPEG",
    //               68,
    //               position,
    //               concentWidth,
    //               concentHeight
    //             );
    //             height -= pageHeight;
    //             position -= pageHeight;
    //             if (height > 0) {
    //               PDF.addPage();
    //             }
    //           }
    //         }
    //         // pdf.addImage(canvas.toDataURL('public\bed.png'), 'PNG', x, y, width, height);
    //         // 保存 pdf 文档
    //         PDF.save(`${title}.pdf`);
    //         resolve(true);
    //       })
    //       .catch(() => {})
    //       .finally(() => {
    //         this.pdfExporting = false;
    //         console.log(88888);
    //       });
    //   });
    // },
    next() {
      if (this.form != null) this.active = 0;
    },
    /** 查询学生申请列表 */
    getList() {
      this.loading = true;
      listSchool(this.queryParams).then((response) => {
        this.schoolList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sex: null,
        identityCard: null,
        studentId: null,
        name: null,
        college: null,
        grade: null,
        stuCreated: null,
        because: null,
        status: null,
        jg: null,
        photo: null,
        birthday: null,
        Intake: null,
        nation: null,
        homeaddress: null,
        fdyopinion: null,
        xgopinion: null,
        xgstatus: null,
        className: null,
        areas: null,
        major: null,
        county: null,
        fdtime: null,
        xgtime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加学生申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getSchool(id).then((response) => {
        this.form = response.data;
        // 地区转换
        this.form.nativePlace = this.parseSelectedPath(this.form.jg)
        this.open = true;
        this.title = "修改学生申请";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.form.status = 0;
            this.form.xgstatus = 0;
            updateSchool(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功,请等待审批");
              this.open = false;
              this.getList();
            });
          } else {
            addSchool(this.form).then((response) => {
                if (response.code === 200) {
                this.$modal.msgSuccess("申请提交成功,请等待审批");
                this.open = false;
                this.getList();
                // this.active = 1;
                // this.$emit("props", {
                //   base: false,
                //   active: 1,
                // });
                this.$router.push({
                  path: "/routine/school/stuinfo",
                });
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除学生申请编号为"' + ids + '"的数据项？')
        .then(function () {
          return delSchool(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "routine/school/export",
        {
          ...this.queryParams,
        },
        `school_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card1 {
  width: 600px;
  /* margin-left: 250px; */
}

.box-card2 {
  width: 600px;
  
  margin-left: 20px;

}
.box-card3 {
  width: 400px;
  margin-left: 800px;
  margin-top: 80px;
  margin-left: 700px;
}
.stylecard{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
